$def with(words, chargrid)

$var title:		Main Page
$var css:		main.css
$var js:		main.js

$# display an 8x8 grid

<div id="words">
	<table>
		<tbody>
		$for word in words:
			<tr class="word">
				<td class="wordindex" wordnum="$:word.num">
					$loop.index
				</td>
			$for char in word.chars:
				<td class="char" charnum="$:char.num" wordnum="$:word.num">
					$:char.val
				</td>
			</tr>
		</tbody>
	</table>
$#	<ol>
$#	$for word in words:
$#		<li class="word" wordnum="$:word.num">
$#			<table>
$#				<tbody>
$#					<tr>
$#					$for char in word.chars:
$#						<td class="char" charnum="$:char.num" wordnum="$:word.num">
$#							$:char.val
$#						</td>
$#					</tr>
$#				</tbody>
$#			</table>
$#		</li>
$#	</ol>
</div>

<div id="chars">
	<table>
		<caption>
			Find the words in grid
		</caption>
		
		<tbody>
			<tr>
				<td>
				</td>
			$for j in range(GridN):
				$# column are labled from 1 to 8
				<td class="coordinate">
					$(j + 1)
				</td>
			</tr>
			
		$for i in range(GridN):
			<tr>
			$# rows are labled from A to H
				<td class="coordinate">
					$(chr(ord('A') + i))
				</td>
				
			$for j in range(GridN):
				$ wordnum = "wordnum=%s" % chargrid[i][j].word.num if chargrid[i][j].word else ""
				<td class="char" charnum="$:chargrid[i][j].num" $:wordnum>
					$:chargrid[i][j].val
				</td>
			</tr>
		</tbody>
	</table>
</div>